<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <link rel="stylesheet" href="../public/layui/css/layui.css"/>
    <link rel="stylesheet" href="../css/mycss.css"/>
    <script src="../public/layui/layui.js"></script>
    <style>
        body{
            height: 100%;
            /*overflow-x:hidden;*/
            /*overflow-y:hidden;*/
            /*overflow: auto;*/
            /*-ms-overflow-style:none;*/
            /*overscroll-behavior: none;*/
        }

        ::-webkit-scrollbar{
            display:none;
        }
    </style>
</head>
<body>
<div class="client-container">
    <!--    轮播图-->
    <div class="layui-carousel border" id="book-swiper">
        <div carousel-item="">
            <div><img src="http://localhost:8000/hotal/front/img/111.jpg"/></div>
            <div><img src="http://localhost:8000/hotal/front/img/111.jpg"/></div>
            <div><img src="http://localhost:8000/hotal/front/img/111.jpg"/></div>
            <div><img src="http://localhost:8000/hotal/front/img/111.jpg"/></div>
        </div>
    </div>
    <hr/>
    <div class="label center">
        房间
    </div>
    <ul class="book-list" id="houseList">
    </ul>
    <div id="demo1"></div>
</div>
<div class="blank"></div>
<script>
    /*<![CDATA[*/
    layui.use(['carousel','element','jquery','layer','laypage'], function(){
        let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        let carousel = layui.carousel;
        let $ = layui.jquery;
        let layer = layui.layer;
        let laypage = layui.laypage;

        let isFirst = true; // 当前显示的列表信息

        function getHouseList(currentPage, pageCount) {
            $.ajax({
                url: '/hotal/front/house/list?pageNum=' + currentPage + "&pageSize=" + pageCount,
                success(res){
                    let data = res.data;
                    console.log(data);
                    if (res.code === 200) {
                        let li = '';
                        for (let i = 0;i < data.records.length; i++) {
                            let record = data.records[i];
                            li += "<li>\n" +
                                "   <a href='../reserve/house/" + `${record.hid}` + "'>" +
                                "            <div>\n" +
                                "                <div class=\"img\">\n" +
                                "                    <img src=\""+ `${record.image}` +"\" alt=\"\">\n" +
                                "                </div>\n" +
                                "                <div class=\"text\">\n" +
                                "                    <div class=\"book-info\">\n" +
                                "                         " + `${record.houseName}` + "<br>\n" +
                                "                        （" + `${record.houseState}` + "）\n" +
                                "                    </div>\n" +
                                "                    <div>\n" +
                                "                        房间号" + `${record.houseNum}` + "\n" +
                                "                    </div>\n" +
                                "                </div>\n" +
                                "            </div>\n" +
                                "    </a>" +
                                "        </li>"
                        }
                        $("#houseList").html(li);
                        //总页数大于页码总数
                        if (isFirst) {
                            //完整功能
                            laypage.render({
                                elem: 'demo1'
                                ,count: data.total
                                ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                                ,jump: function(obj){
                                    getHouseList(obj.curr, obj.limit);
                                },
                                limit: 8,
                                limits: [1, 4, 8, 16]
                            });
                        }
                        isFirst = false;
                    } else if (res.code === 510) {
                        // 如果错误码是510就跳转到登录界面
                        location.href = "/hotal/front/html/login.html";
                    } else {
                        // 如果是其他原因就跳出一个警告框
                        alert("数据请求异常");
                    }

                }
            }) ;
        }

        /**
         * 刚刚打开这个网页的时候向服务器请求房间列表信息
         */
        getHouseList(1, 8);

        //常规轮播
        carousel.render({
            elem: '#book-swiper'
            ,width: '100%'
            ,height: '440px'
            ,interval: 5000
        });


    });

    /*]]>*/
</script>
</body>
</html>